<template>
  <div class="comment">
    <template v-if="$store.state.user">
      <MarkdownEditor v-model="value"></MarkdownEditor>
      <div class="flex action">
        <div class="flex-item tips">
          评论框支持Markdown语法，Ctrl+V可以粘贴图片
        </div>
        <div class="flex-item post-btn">
          <UserInfo :user="$store.state.user"/>
          <el-button @click="post()"
                     :disabled="saveLoading"
                     :icon="saveLoading?'el-icon-loading':'el-icon-position'"
                     type="primary" size="mini">发布评论
          </el-button>
        </div>
      </div>
    </template>
    <div v-else class="login-tips">
      <div class="text">请登录后发表评论</div>
      <el-button size="mini" type="primary" @click="$emit('login')">点击登录</el-button>
    </div>
    <el-divider></el-divider>
    <el-skeleton v-if="initialize" :rows="6" animated />
    <el-empty v-if="data&&data.comments.length===0" description="暂无评论，快来发表一条神评论吧！"></el-empty>
    <div class="comment-list" v-if="data">
      <CommentItem @refresh="refresh()" v-for="item in data.comments" :key="item.id" :comment="item"/>
      <pagination :dynamic="true" :pages="data.paginator.pages" :current="data.paginator.current" @change="change"/>
    </div>

  </div>
</template>

<script>


import api from "@/utils/api";

export default {
  name: "Comment",
  props: {
    targetId: {
      type: Number,
      default: null
    },
    targetType: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      value: '',
      loading: false,
      saveLoading: false,
      data: null,
      page: 1,
      initialize:true
    }
  },
  methods: {
    change(current){
      this.page = current;
      this.refresh();
    },
    post() {

      //校验评论
      let self = this;
      if (!this.value.replace(/ /g, '')) {
        self.$message.error("请输入评论！");
        return;
      }


      this.saveLoading = true;
      api.commentSave(this.targetType, this.targetId, this.value).then(result => {
        if (result.code === 1) {
          self.refresh();
          self.value = '';
        }
      }).finally(() => self.saveLoading = false);

    },
    async loadData() {

      return await api.getComment({
        targetId: this.targetId,
        targetType: this.targetType,
        page: this.page
      });
    },
    refresh() {

      let self = this;
      this.loading = true;
      this.loadData().then(res => {
        self.initialize = false;
        self.data = res;
      }).finally(() => self.loading = false);
    }
  },
  created() {
    this.refresh();
  }
}
</script>
<style lang="less">
.v-note-wrapper {
  background-color: var(--bg);
}
</style>
<style scoped lang="less">
.comment {
  margin-top: 10px;
}

.action {
  margin-top: 10px;
  margin-bottom: 10px;

  .tips {
    font-size: 12px;
    color: var(--color);
  }

  .post-btn {
    justify-content: end;
  }
}

.login-tips {
  text-align: center;
  padding: 10px;

  .text {
    color: var(--color);
    font-size: 12px;
    margin-bottom: 10px;
  }
}
</style>
